<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>在线网校学习平台</title>

    <link href="../../res/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../res/css/reset.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../../res/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../../res/js/bootstrap.min.js"></script>

    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="icon" type="image/png" href="../../res/i/ico.png" sizes="16x16">
    <script type="text/javascript">
        CONETXT_PATH = '';
    </script>
</head>

<body>
<!-- 头部-start -->
<div class="f-header">
    <div class="f-header-box clearfix">
        <a href=".." class="logo" title="网校在线学习平台"></a>
        <nav class="header-nav">
            <a href=".." class="header-nav-item">首 页</a>
            <a href="../course/list.html" class="header-nav-item">课 程</a>
            <a href="../user/home.html" class="header-nav-item">我的</a>
            <a href="../opt/index.html" style="width:100px;" target="_blank" class="header-nav-item">运营CMS</a>
        </nav>

        <nav class="header-nav" style="float:right">
            <a href="#myModal" class="header-nav-item" data-toggle="modal" onclick="login();"
               style="margin-right:0px;font-size:14px;">登录</a>
            <a href="../auth/register.html" class="header-nav-item" style="margin-left:0px;font-size:14px;">注册</a>
            <a href="#" class="header-nav-item" style="margin-left:0px;font-size:14px;" id="userdetail">头像</a>
        </nav>
    </div>
</div>
<script type="text/javascript">
    function login() {
        $('#loginTitle').css('color', '#337Ab7');
        $('#loginForm').show();
        $('#registeTitle').css('color', '#000');
        $('#registeForm').hide();
    }

    function registe() {
        $('#loginTitle').css('color', '#000');
        $('#loginForm').hide();
        $('#registeTitle').css('color', '#337Ab7');
        $('#registeForm').show();
    }

    $(function () {
        $("#userdetail").popover({
            trigger: 'manual',
            placement: 'bottom',
            html: 'true',
            content: '<div style="width:300px;height:300px;"></div>',
            animation: false
        }).on("mouseenter", function () {
            var _this = this;
            $(this).popover("show");
            $(this).siblings(".popover").on("mouseleave", function () {
                $(_this).popover('hide');
            });
        }).on("mouseleave", function () {
            var _this = this;
            setTimeout(function () {
                if (!$(".popover:hover").length) {
                    $(_this).popover("hide")
                }
            }, 0);
        });
        //课程分类展示
        $(".category").popover({
            trigger: 'manual',
            placement: 'right',
            html: 'true',
            content: '',
            animation: false
        }).on("mouseenter", function () {
            var cid = $(this).attr('c-id');
            $('#' + cid).show();
            $('#' + cid).hover(function () {
                $('#' + cid).show();
            }, function () {
                $('#' + cid).hide();
            });
        }).on("mouseleave", function () {
            var cid = $(this).attr('c-id');
            $('#' + cid).hide();
        });
    });
</script>
<!-- 头部-end -->

<!-- 登录注册-start -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" style="position:fixed; top:30%;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" style="font-size:18px;">×</span>
                </button>
                <h4 class="modal-title" id="loginTitle" style="float: left; color: #337Ab7;cursor: pointer; "
                    onclick="login();">登 录</h4>
                <h4 class="modal-title" id="registeTitle" style="float: left;margin-left: 20px;cursor: pointer;"
                    onclick="registe();">注 册</h4>
                <div class="clearfix"></div>
            </div>

            <div class="modal-body">
                <form id="loginForm" class="form-horizontal" style="padding: 0px 20px;">
                    <div class="form-group">
                        <input type="email" class="form-control" id="username" placeholder="用户名">
                    </div>
                    <div class="form-group help">
                        <input type="password" class="form-control" id="password" placeholder="密　码">
                    </div>
                    <div class="form-group">
                        <label>
                            <input type="checkbox" value="None" id="checkbox1" name="check">
                            <span class="text" style="color: #787D82;font-size: 14px;">下次自动登录</span>
                        </label>
                    </div>

                    <a href="javascript:void(0)">
                        <div class="header-login-btn">登 录</div>
                    </a>
                </form>

                <form id="registeForm" class="form-horizontal" style="padding: 0px 20px;display: none;">
                    <div class="form-group">
                        <input type="email" class="form-control" id="username" placeholder="用户名">
                    </div>
                    <div class="form-group help">
                        <input type="password" class="form-control" id="password" placeholder="密　码">
                    </div>
                    <a href="javascript:void(0)">
                        <div class="header-login-btn">注 册</div>
                    </a>
                </form>

            </div>

        </div>
    </div>
</div>
<!-- 登录注册-end -->


<div class="f-main clearfix">
    <!-- 一级分类-start -->
    <div class="course-nav-row clearfix">
        <span class="hd">方向：</span>
        <ul class="course-nav">
            <li class="course-nav-item <#if curCode?? && curCode=='-1'>cur-course-nav</#if> ">
                <a href="javascript:void(0)" onClick="_queryPage(1,'-1',undefined)">全部</a>
            </li>
            <#if classifys??>
                <#list classifys as item>
                    <li class="course-nav-item <#if curCode?? && curCode == item.code>cur-course-nav</#if>">
                        <a href="javascript:void(0)" onClick="_queryPage(1,'${item.code!}',undefined)">${item.name!}</a>
                    </li>
                </#list>
            </#if>
        </ul>
    </div>
    <!-- 一级分类-end -->

    <!-- 二级分类-start -->
    <div class="course-nav-row clearfix">
        <span class="hd">分类：</span>
        <ul class="course-nav">
            <li class="course-nav-item <#if curSubCode?? && curSubCode=='-2'>cur-course-nav</#if>">
                <a href="javascript:void(0)" onClick="_queryPage(1,'-2')">全部</a>
            </li>
            <#if subClassifys??>
                <#list subClassifys as item>
                    <li class="course-nav-item <#if curSubCode?? && curSubCode == item.code>cur-course-nav</#if>">
                        <a href="javascript:void(0)" onClick="_queryPage(1,'${item.code!}')">${item.name!}</a>
                    </li>
                </#list>
            </#if>
        </ul>
    </div>
    <!-- 二级分类-end -->

    <!-- 课程列表-start -->
    <div class="types-block clearfix" style="padding:0px;">
        <h3 style="margin-bottom: 20px;">
            <span class="types-title" style="margin-right:40px;">课程列表</span>
            <a href="javascript:void(0)" style="display: inline-block;margin-right:20px;" onclick="_queryPage(1,undefined,'last')">
                <span >最新</span>
            </a>
            <a href="javascript:void(0)" style="display: inline-block;" onclick="_queryPage(1,undefined,'pop')">
                <span >最热</span>
            </a>
        </h3>
        <div class="types-content clearfix" style="margin-bottom: 20px;">
            <#if courseList?? && courseList?size gt 0>
                <#list courseList.list as item>
                    <#assign n = item_index + 1 />
                    <a href="${s.base}/course/learn/${item.id}.html" target="_blank">
                        <div class="course-card-container"  <#if n %5 == 0>style="margin-right: 0px;" </#if>>
                        <#if n %5 == 0>
                        <div class="course-card-top green-bg">
                        <#elseif n %4 == 0>
                        <div class="course-card-top pink-bg">
                        <#elseif n %3 == 0>
                        <div class="course-card-top purple-bg">
                        <#elseif n %2 == 0>
                        <div class="course-card-top gray-bg">
                        <#else>
                        <div class="course-card-top brown-bg">
                        </#if>
                                <span>${item.subClassifyName!}</span>
                            </div>

                            <div class="course-card-content">
                                <h3 class="course-card-name" title="${item.name!}">${item.name!}</h3>
                                <p  class="course-card-brief" title="${item.brief!}">${item.brief!}</p>
                                <div class="course-card-bottom">
                                    <#if item.free == 1>
                                        <div class="course-card-info">
                                            <#if item.level == 1>
                                                初级
                                                <#elseif item.level == 2>
                                                    中级
                                                    <#else>
                                                        高级
                                            </#if>
                                            <span>·</span>${item.studyCount!}人在学
                                        </div>
                                        <#else>
                                            <div class="course-card-info">${item.studyCount!}人在学</div>
                                            <div class="course-card-price">￥${item.price!}</div>
                                    </#if>
                                </div>
                            </div>
                        </div>
                    </a>
                </#list>
            </#if>
        </div>

    </div>
    <!-- 课程列表-end -->

    <!-- 分页-start -->
<#if courseList?? && courseList?size gt 0>
<div class="page-box clearfix">
    <div class="page clearfix">
        <div style="float:left;">
            <a class="page-next" href="javascript:void(0);" onclick="_queryPage(1)">首 页</a>
            <#if courseList.prePage == 0>
                <a class="page-next" href="javascript:void(0);">上一页</a>
                <#else>
                <a class="page-next" href="javascript:void(0);" onclick="_queryPage(${courseList.prePage!})">上一页</a>
            </#if>

            <#list courseList.navigatepageNums as n>
                <#if n_index lt 6>
                    <#if n_index == courseList.pageNum>
                    <a class="page-cur" href="javascript:void(0);" >${n}</a>
                    <#else>
                        <a class="page-num" href="javascript:void(0);" onclick="_queryPage(${n});">${n}</a>
                        <#if n_index == 6>
                            <span class="page-omit">...</span>
                        </#if>
                    </#if>
                </#if>
            </#list>


            <a class="page-next" href="javascript:void(0);"  onclick="_queryPage(${courseList.nextPage})">下一页</a>
            <a class="page-next" href="javascript:void(0);"  onclick="_queryPage(${courseList.lastPage!})">尾 页</a>
        </div>
    </div>
</div>
</#if>
    <!-- 分页-end -->
</div>

<div class="f-footer">
    <div class="f-footer-box clearfix">
        <div class="footer-link">
            <a href="javascript:void(0);" target="_blank" title="企业合作">企业合作</a>
            <a href="javascript:void(0);" target="_blank" title="联系我们">联系我们</a>
            <a href="javascript:void(0);" target="_blank" title="常见问题">常见问题</a>
            <a href="javascript:void(0);" target="_blank" title="意见反馈">意见反馈</a>
            <a href="javascript:void(0);" target="_blank" title="友情链接">友情链接</a>
        </div>
        <div class="footer-copyright">
            <span>©&nbsp;2017&nbsp; 备案 </span>
        </div>
    </div>
</div>

<script type="text/javascript">
    var _code = '${curCode}';
    var _subCode = '${curSubCode}';
    var _sort = '${sort!}';

    function _queryPage(pageNum, code, sort) {
        var params = '?pageNum=' + pageNum;
        //分类，参数没有就用页面缓存
        if (code == undefined) {//来自于分页按钮
            code = _code;
            if (_subCode != '-2') {
                code = _subCode; //优先使用 subCode
            }
        }
        if (code == '-2') {//点击分类的全部
            code = _code;
        }
        if (code != '-1' && code != '') {
            params += '&c=' + code;
        }

        //排序，函数参数没有就用页面缓存
        if (sort == undefined && _sort != '') {
            sort = _sort;
        }
        if (sort != undefined) {
            params += '&sort=' + sort;
        }
        window.location.href = '${s.base}/course/list.html' + params;
    }
</script>
</body>

</html>
